
<template>
    
    
    
    
    
    
    
<!--    图片显示-->
    <el-image
        style="width: 240px; height: 325px;cursor: pointer;margin-right: 10px"
        :src="img"
        @click.stop="goPreviewImg(img)"
        v-for="img in upShowProductImgs"
    />
    
<!--    上传组件-->
    <el-upload
        class="upload-demo"
        action=""
        :before-upload="handleBeforeUpload"
        :show-file-list="false"
        accept="image/*"
    >
        
      
        <el-icon class="upload-icon" style="font-size: 50px"><Plus /></el-icon>
    </el-upload>
    
   
    
    <!--    //图片预览-->
    <div class="mask" v-show="isShowPreview" @wheel="handleWheel">
        <!--        //需要移动的div-->
        <div :style="{ transform: `translateX(${translateX}vw)` }" class="image-container">
            <div v-for="(img,index) in previewImgg" class="mmask">
                <el-image :src="img" class="scalImg" :style="{ transform: `scale(${scale})` }" >
                </el-image>
            </div>
        </div>
        <el-icon style="z-index: 9999999999999999999; color: #fff;font-size: 50px;position: absolute;right: 70px;top: 40px;cursor: pointer" @click="closePreview"><Close /></el-icon>
        <el-icon style="z-index: 9999999999999999999;color: #fff;font-size: 50px;position: absolute;right: 100px;top: 400px;cursor: pointer" @click="goright" ><ArrowRightBold /></el-icon>
        <el-icon style="z-index: 9999999999999999999;color: #fff;font-size: 50px;position: absolute;left: 100px;top: 400px;cursor: pointer" @click="goleft" ><ArrowLeftBold /></el-icon>
    </div>
    
    <CropCompoent ref="crop" v-show="isShowCrop" :parentMethod="saveCropImg"></CropCompoent>
    <el-icon v-show="isShowCrop" style="z-index: 9999999999;color: #fff;font-size: 50px;position: absolute;right: 70px;top: 40px;cursor: pointer" @click="closeCropPreview"><Close /></el-icon>

</template>

<script setup>
import { ref} from "vue";
import {ElMessage} from "element-plus";
import CropCompoent from "@/components/CropComponent480650.vue"











const scale = ref(2); // 初始缩放比例
// 鼠标滚轮处理函数
const handleWheel = (event) => {
    const delta = event.deltaY; // 获取滚轮的变化量
    if (delta > 0) {
        // 滚轮向下滚动，缩小图片
        scale.value = Math.max(0.5, scale.value - 0.1); // 最小缩放比例为 0.5
    } else {
        // 滚轮向上滚动，放大图片
        scale.value = Math.min(3, scale.value + 0.1); // 最大缩放比例为 3
    }
};

let imgCount='';
const translateX = ref();  // 跟踪 div 的水平位移
const goright =()=>{
    if (previewImgg.value.length===1){
        return;;
    }
    // 点击右箭头时，translateX 减小，div 向左移动
    if (translateX.value===50-(imgCount-1)*100){
        ElMessage.info("没有更多图片了！😜")
        return;
    }
    translateX.value -= 100;
    
    
}
const goleft =()=>{
    if (previewImgg.value.length===1){
        return;;
    }
    // 点击右箭头时，translateX 减小，div 向左移动
    if (translateX.value===50)
        return;
    translateX.value += 100;
    
}

const previewImgg = ref([]);
const isShowPreview = ref(false);

const goPreviewImg=(row)=>{
    console.log(row)
    translateX.value=0;
    if (Array.isArray(row.imgUrls)){
        if (row.imgUrls.length!=1)
            translateX.value=50;
        previewImgg.value=row.imgUrls;
        imgCount=row.imgUrls.length;
    }else {
        previewImgg.value=[]
        previewImgg.value.push(row)
    }
    isShowPreview.value=true;
    
}


const isShowCrop=ref(false);
const crop=ref(null)

const handleBeforeUpload =(file)=>{
    isShowCrop.value=true;
    crop.value.handleBeforeUpload(file);
}

const closeCropPreview =()=>{
    isShowCrop.value=false;
}

//前端显示的图片 base64编码的
const upShowProductImgs = ref([])

//保存上传到后端的图片的路径
const imgUrls =[]

const saveCropImg = ()=>{
    isShowCrop.value=false;
    if (upShowProductImgs.value.length === 5){
        ElMessage.warning("图片添加最多5张，请酌情选择！")
        return;
    }
    upShowProductImgs.value.push(crop.value.cimgValue);
    imgUrls.push(crop.value.imgUrl)
    
    console.log(upShowProductImgs.value)
    console.log(imgUrls)
    
}



const closePreview=()=>{
    isShowPreview.value=false;
}





















</script>



<style scoped>



</style>